<template>
	<view style="padding: 32rpx;">
		<u--form labelPosition="top" labelWidth="auto" :model="withdrawForm" :rules="rules" ref="uForm">
			<u-form-item label="旧密码" prop="phone" >
				<u--input v-model="withdrawForm.phone"  placeholder="输入旧密码"></u--input>
			</u-form-item>
			<u-form-item label="新密码"  prop="password" >
				<u--input v-model="withdrawForm.password"  placeholder="输入新密码" clearable :password="!eyeOpen">
					<template slot="suffix">
						<view class="" @click="eyeOpen = !eyeOpen" style="height: 24px;">
							<img src="@/static/img/icon-eye-open.png" v-if="eyeOpen" alt="" style="width: 24px;height: 24px;margin:0;" />
							<img src="@/static/img/icon-eye-close.png" v-else alt="" style="width: 24px;height: 24px;margin:0;" />		
						</view>
					</template>
				</u--input>
			</u-form-item>
			<u-form-item label="确认新密码" prop="reason" >
				<u--input v-model="withdrawForm.password"  placeholder="再次输入新密码" clearable :password="!eyeOpen">
					<template slot="suffix">
						<view class="" @click="eyeOpen = !eyeOpen" style="height: 24px;">
							<img src="@/static/img/icon-eye-open.png" v-if="eyeOpen" alt="" style="width: 24px;height: 24px;margin:0;" />
							<img src="@/static/img/icon-eye-close.png" v-else alt="" style="width: 24px;height: 24px;margin:0;" />		
						</view>
					</template>
				</u--input>
			</u-form-item>
		</u--form>
		<u-button type="primary"  class="opt-btn confirm" text="修改密码"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				withdrawForm:{
					phone: '19912345678', //手机号码
					password: 'a12345678', //密码
					reason:''
				},
				rules: {
					'phone': [
						{
							type: 'string',
							required: true,
							message: '输入正确的手机号格式',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '输入正确的手机号格式',
							trigger: ['change','blur'],
						}
					],
					'password': [
						{
							type: 'string',
							required: true,
							message: '输入8-20位密码，数字和字母组合',
							trigger: ['blur', 'change'],
						},
						{
							min: 8,
							max: 20,
							message: '输入8-20位密码，数字和字母组合',
							trigger: ['blur', 'change'],
						},
						{
							validator: (rule, value, callback) => {
								return  /[a-zA-Z]/.test(value) && /[0-9]/.test(value);
							},
							message: '输入8-20位密码，数字和字母组合',
							trigger: ['blur', 'change'],
						}
					],
				},
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="less">
	.opt-btn {
		flex: 1;
		height: 72rpx;
		border-radius: 36rpx;
		font-size: 32rpx;
		border: none;
		margin-top: 180rpx;
	}
	
	.confirm {
		background: linear-gradient( 270deg, #1B5FF3 0%, #55B1F4 100%), #397FF8;
	}
	
	::v-deep .u-input, .u-textarea {
		background-color: #F3F5F8;
		border: none;
	}
</style>
